import { FC, useEffect, useRef, useState } from "react";
import { Space, Spin, Typography } from "antd";
import { useSearchParams } from "react-router-dom";
import { useDebounceFn, useRequest } from 'ahooks'
import style from './pages.module.scss'
import classnames from 'classnames/bind'
import { DEFAULT_PAGESIZE, KEYWORD } from "../concats";
import QuestionCard from "../components/QuestionCard";
import SearchContainer from "../components/Search";

//获取答卷信息Api
import { getQuestionList } from "../service";


const CBN = classnames.bind(style)
const { Title } = Typography
export type QuestionCardType = {
    '_id': string,
    title: string,
    count: number,
    ispublished: boolean,
    start: boolean,
    deleted: boolean,
    createTime: string
}

const QuestionPages: FC = () => {
    const LoadMore = useRef<HTMLDivElement>(null)
    const scrollEle = useRef<HTMLDivElement>(null)
    const [dataList, setdataList] = useState<QuestionCardType[]>([])
    const [params] = useSearchParams()
    const [page, setpage] = useState(1)
    const pagesize = DEFAULT_PAGESIZE

    const { run, loading } = useRequest(() => {
        return getQuestionList({ page, pagesize, keyword: params.get(KEYWORD) || '' })
    }, {
        manual: true,
        onSuccess(res) {
            const list = res.list
            setdataList(dataList.concat(list))
        }
    })

    const { run: tryLoadMore } = useDebounceFn(() => {
        const ele = LoadMore.current
        if (ele == null) return
        const domReact = ele.getBoundingClientRect()
        if (domReact == null) return
        const { bottom } = domReact
        if (bottom < document.body.clientHeight - 60) {
            setpage(page + 1)
            run()
        }
    }, {
        wait: 200
    })
    //监听url变化
    useEffect(() => {
        setpage(1)
        setdataList([])
        run()
    }, [params])

    useEffect(() => {
        scrollEle.current?.addEventListener('scroll', tryLoadMore)
        return () => {
            scrollEle.current?.removeEventListener('scroll', tryLoadMore)
        }
    }, [])

    return <div className={CBN('QuestionPages')}>
        <div className={CBN('top')}>
            <div className="left">
                <Title>我的问卷</Title>
            </div>
            <div className="right">
                <SearchContainer></SearchContainer>
            </div>
        </div>
        <div className={CBN('container')} ref={scrollEle} >
            <div>
                <Space direction='vertical' style={{ width: '100%' }}>
                    {
                        dataList.map((item) => {
                            return <QuestionCard key={item._id} {...item}></QuestionCard>
                        })
                    }
                </Space>
                {/* <div style={{height:'1000px'}}></div> */}
                <div ref={LoadMore} >{
                    loading ? <Spin></Spin> : '上滑加载更多'
                }</div>
            </div>
        </div>

    </div>
}

export default QuestionPages